<template>
  <div class="app-container">
    <!-- 案件处理 -->
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
        <el-form-item label="报修日期">
          <el-date-picker
            v-model="alarmdate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item label="报修单号">
          <el-input
            v-model="listQuery.fbillno"
            clearable
            class="filter-item"
            style="width: 200px"
            placeholder="请输入报修单号"
          />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select
            v-model="listQuery.fbillstate"
            class="filter-item"
            style="width: 200px"
            clearable
            placeholder="请选择处理状态"
          >
            <el-option
              v-for="item in fbillstateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div>
        <span v-if="this.$store.state.user.fsiteLevel==3" >
          <el-form-item label="客户名称">
            <el-select v-model="listQuery.fsiteNo" disabled clearable filterable class="filter-item" placeholder="请选择客户名称">
              <el-option
                v-for="item in getListfsiteNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="报修人员">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.freportuser" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择报修人员">
                <el-option
                  v-for="item in getListuser"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('search')"/>
            </div>
          </el-form-item>
          <el-form-item label="存放地点">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.fpointNo" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择存放地点">
                <el-option
                  v-for="item in getListfpointNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('search')"/>
            </div>
          </el-form-item>
          <el-form-item label="维修人员">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.frepairuser" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择维修人员">
                <el-option
                  v-for="item in getListuser"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('searchre')"/>
            </div>
          </el-form-item>
        </span>
        <span v-else>
          <el-form-item label="客户名称">
            <el-select v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称" @change="changeFsiteNo">
              <el-option
                v-for="item in getListfsiteNo"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="报修人员">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.freportuser" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择报修人员">
                <el-option
                  v-for="item in getListuserArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('search')"/>
            </div>
          </el-form-item>
          <el-form-item label="存放地点">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.fpointNo" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择存放地点">
                <el-option
                  v-for="item in getListfpointNoArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('search')"/>
            </div>
          </el-form-item>
          <el-form-item label="维修人员">
            <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
              <el-select v-model="listQuery.frepairuser" style="display: inline-block;width:200px" clearable filterable class="filter-item" placeholder="请选择维修人员">
                <el-option
                  v-for="item in getListuserArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('searchre')"/>
            </div>
          </el-form-item>
        </span>
      </div>
      <el-form-item>
        <!-- v-permission="['fault:repairHead:read']" -->
        <el-button
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          round
          size="medium"
          class="filter-item"
          @click="handleFilter"
        >查找</el-button
        >
        <!-- v-permission="['fault:repairHead:create']" -->
        <el-button
          :style="{background:buttonColor.add,color:buttonColor.color}"
          round
          size="medium"
          class="filter-item"
          @click="handleCreate"
        >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :header-cell-style="tableColor"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding" >
        <template slot-scope="scope">
          <!-- v-permission="['purchase:head:update']" -->
          <div class="operationButton">
            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="handleUpdate(scope.row)">
              <img src="../../../public/images/edit.png" >
              编辑
            </div>

            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="audit(scope.row)">
              <img src="../../../public/images/examine.png" >
              确认
            </div>

            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="handleDelete(scope.row)">
              <img src="../../../public/images/del.png" >
              删除
            </div>

            <div :style="{color:buttonColor.edit,cursor:'pointer'}" >
              <img src="../../../public/images/print.png" >
              打印
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="center" label="报修单号" prop="fbillno" width="160"/>
      <el-table-column v-if="this.$store.state.user.fsiteLevel!=3" :formatter="formatfsiteNo" width="200" align="center" label="客户名称" prop="fsiteNo" />
      <el-table-column :formatter="formatfpointNo" align="center" label="存放地点" prop="fpointNo" />
      <el-table-column :formatter="formatfreportuser" align="center" label="报修人员" prop="freportuser" />
      <el-table-column
        :formatter="datetimeFormat"
        width="100"
        align="center"
        label="报修日期"
        prop="freportdate"
      />
      <el-table-column
        width="150"
        align="center"
        label="固定资产码"
        prop="fequipmentbarcode"
      />
      <el-table-column align="center" label="设备名称" prop="fequipmenttag" />
      <el-table-column :formatter="formatferrorlevel" align="center" label="紧急程度" prop="ferrorlevel" />
      <el-table-column :formatter="formatfrepairuser" align="center" label="维修人员" prop="frepairuser" />
      <el-table-column
        :formatter="datetimeFormat"
        width="100"
        align="center"
        label="接单日期"
        prop="frecdate"
      />
      <el-table-column align="center" label="处理状态" prop="fbillstate">
        <template slot-scope="scope">
          <span v-if="scope.row.fbillstate === 1" :style="{ color: buttonColor.itemisconfirmed }">{{
            scope.row.fbillstate |
              siteTypeFilter
          }}</span>
          <span v-else-if="scope.row.fbillstate === 2" :style="{ color: buttonColor.itemconfirmed }">{{
            scope.row.fbillstate | siteTypeFilter
          }}</span>
          <span v-else :style="{ color: buttonColor.iteminvalid }">{{ scope.row.fbillstate | siteTypeFilter }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        v-if="dialogStatus==='create'"
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
      >

        <el-row>
          <el-col :span="8">
            <el-form-item label="报修单号" prop="fbillno">
              <el-input :disabled="true" v-model="dataForm.fbillno" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报修日期" prop="freportdate">
              <el-date-picker v-model="dataForm.freportdate" disabled type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="处理状态" prop="fbillstate">
              <el-select
                v-model="dataForm.fbillstate"
                disabled
                class="filter-item"
                clearable
                placeholder="请选择处理状态"
              >
                <el-option
                  v-for="item in fbillstateOptionsAll"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item
              v-if="this.$store.state.user.fsiteLevel==3"
              label="客户名称"
              prop="fsiteNo"

            >
              <el-select v-model="dataForm.fsiteNo" disabled clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item
              v-else
              label="客户名称"
              prop="fsiteNo"
            >
              <el-select v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称" @change="changeFsiteNoAdd">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="存放地点" prop="fpointNo">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.fpointNo" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择存放地点" @change="changeFpointNo">
                  <el-option
                    v-for="item in getListfpointNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('add')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="存放地点" prop="fpointNo">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.fpointNo" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择存放地点" @change="changeFpointNo">
                  <el-option
                    v-for="item in getListfpointNoAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('add')"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="报修人员" prop="freportuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.freportuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择报修人员">
                  <el-option
                    v-for="item in getListuser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('add')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="报修人员" prop="freportuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.freportuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择报修人员">
                  <el-option
                    v-for="item in getListuserAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('add')"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="固定资产码" prop="fequipmentbarcode">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-input v-model="dataForm.fequipmentbarcode" style="display: inline-block" />
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialogcode"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="fequipmenttag">
              <el-input v-model="dataForm.fequipmenttag" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="维护合约" prop="freporttype">
              <el-select
                v-model="dataForm.freporttype"
                class="filter-item"
                clearable
                placeholder="请选择维护合约"
              >
                <el-option
                  v-for="item in freporttypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="紧急程度" prop="ferrorlevel">
              <el-select v-model="dataForm.ferrorlevel" clearable filterable class="filter-item" placeholder="请选择紧急程度">
                <el-option
                  v-for="item in getListferrorlevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="维修人员" prop="frepairuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.frepairuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择维修人员" @change="frepairuserChange">
                  <el-option
                    v-for="item in getListuser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('addre')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="维修人员" prop="frepairuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.frepairuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择维修人员" @change="frepairuserChange">
                  <el-option
                    v-for="item in getListuserAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('addre')"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接单日期" prop="frecdate">
              <el-date-picker v-model="dataForm.frecdate" type="date" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="出发日期" prop="fcfdate">
              <el-date-picker v-model="dataForm.fcfdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="达到日期" prop="fdddate">
              <el-date-picker v-model="dataForm.fdddate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完成日期" prop="fwcdate">
              <el-date-picker v-model="dataForm.fwcdate" type="date" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="离开日期" prop="flkdate">
              <el-date-picker v-model="dataForm.flkdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修评价" prop="fbjnote">
              <el-input v-model="dataForm.fbjnote" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修得分" prop="fbjnum">
              <el-input v-model.number="dataForm.fbjnum" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form
        v-else
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
      >

        <el-row>
          <el-col :span="8">
            <el-form-item label="报修单号" prop="fbillno">
              <el-input :disabled="true" v-model="dataForm.fbillno" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报修日期" prop="freportdate">
              <el-date-picker :disabled="true" v-model="dataForm.freportdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="处理状态" prop="fbillstate">
              <el-select
                :disabled="true"
                v-model="dataForm.fbillstate"
                class="filter-item"
                clearable
                placeholder="请选择处理状态"
              >
                <el-option
                  v-for="item in fbillstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="客户名称" prop="fsiteNo">
              <el-select :disabled="true" v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="存放地点" prop="fpointNo">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.fpointNo" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择存放地点" @change="changeFpointNo">
                  <el-option
                    v-for="item in getListfpointNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('add')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="存放地点" prop="fpointNo">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.fpointNo" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择存放地点" @change="changeFpointNo">
                  <el-option
                    v-for="item in getListfpointNoAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('add')"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="报修人员" prop="freportuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.freportuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择报修人员">
                  <el-option
                    v-for="item in getListuser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('add')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="报修人员" prop="freportuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.freportuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择报修人员">
                  <el-option
                    v-for="item in getListuserAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('add')"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="固定资产码" prop="fequipmentbarcode">
              <el-input :disabled="true" v-model="dataForm.fequipmentbarcode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="fequipmenttag">
              <el-input :disabled="true" v-model="dataForm.fequipmenttag" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维护合约" prop="freporttype">
              <el-select
                v-model="dataForm.freporttype"
                disabled
                class="filter-item"
                clearable
                placeholder="请选择维护合约"
              >
                <el-option
                  v-for="item in freporttypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="紧急程度" prop="ferrorlevel">
              <el-select v-model="dataForm.ferrorlevel" disabled clearable filterable class="filter-item" placeholder="请选择紧急程度">
                <el-option
                  v-for="item in getListferrorlevel"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="维修人员" prop="frepairuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.frepairuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择维修人员" @change="frepairuserChange">
                  <el-option
                    v-for="item in getListuser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('addre')"/>
              </div>
            </el-form-item>
            <el-form-item v-else label="维修人员" prop="frepairuser">
              <div style="display:flex;justify-content:flex-end;align-items:center">
                <el-select v-model="dataForm.frepairuser" style="display: inline-block" clearable filterable class="filter-item" placeholder="请选择维修人员" @change="frepairuserChange">
                  <el-option
                    v-for="item in getListuserAreaAdd"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
                <i style="display: inline-block;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoguse('addre')"/>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接单日期" prop="frecdate">
              <el-date-picker :disabled="true" v-model="dataForm.frecdate" type="date" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="出发日期" prop="fcfdate">
              <el-date-picker v-model="dataForm.fcfdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="达到日期" prop="fdddate">
              <el-date-picker v-model="dataForm.fdddate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完成日期" prop="fwcdate">
              <el-date-picker v-model="dataForm.fwcdate" type="date" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="离开日期" prop="flkdate">
              <el-date-picker v-model="dataForm.flkdate" type="date" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修评价" prop="fbjnote">
              <el-input v-model="dataForm.fbjnote" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修得分" prop="fbjnum">
              <el-input v-model.number="dataForm.fbjnum" onkeyup="this.value=this.value.replace(/[^\d]/g,'');" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs type="border-card">
        <el-tab-pane label="设备照片">
          <div class="app-container">
            <!-- 子表一查询和其他操作 -->
            <div class="filter-container">
              <el-button
                :style="{background:buttonColor.add,color:buttonColor.color}"
                round
                size="medium"
                class="filter-item"
                @click="handleUpdate1"
              >添加</el-button
              >
            </div>

            <!-- 子表一查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="15vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column align="center" label="照片" prop="fimage">
                <template slot-scope="scope">
                  <img :src="scope.row.fimage" class="avatar" >
                </template>
              </el-table-column>
              <el-table-column align="center" label="备注" prop="fmemo" />
              <el-table-column
                align="center"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    class="button-margin"
                    @click="handleDelete1(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="故障描述">
          <el-input
            :rows="7"
            v-model="dataForm.ferrormemo"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-tab-pane>
        <el-tab-pane label="故障列表">
          <div class="app-container">
            <!-- 子表二查询和其他操作 -->
            <div class="filter-container">
              <el-button
                :style="{background:buttonColor.add,color:buttonColor.color}"
                round
                size="medium"
                class="filter-item"
                icon="el-icon-edit"
                @click="handleUpdateTwo"
              >添加</el-button
              >
            </div>

            <!-- 子表二查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details2"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="15vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column align="right" label="故障代码" prop="ferrorno" />
              <el-table-column :formatter="formatterferrorname" align="right" label="故障名称" prop="ferrorname" />
              <el-table-column align="right" label="备注" prop="fmemo" />
              <el-table-column
                align="center"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    class="button-margin"
                    @click="handleDeleteTwo(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="解决步骤">
          <div class="app-container">
            <!-- 子表三查询和其他操作 -->
            <div class="filter-container">
              <el-button
                :style="{background:buttonColor.add,color:buttonColor.color}"
                round
                size="medium"
                class="filter-item"
                icon="el-icon-edit"
                @click="handleUpdateThree"
              >添加</el-button
              >
            </div>

            <!-- 子表三查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details3"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="15vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                align="center"
                label="解决说明"
                prop="fprocmemo"
              />
              <el-table-column
                align="center"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    class="button-margin"
                    @click="handleDeleteThree(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="更换零件">
          <div class="app-container">
            <!-- 子表四查询和其他操作 -->
            <div class="filter-container">
              <el-button
                :style="{background:buttonColor.add,color:buttonColor.color}"
                round
                size="medium"
                class="filter-item"
                icon="el-icon-edit"
                @click="handleUpdateFour"
              >添加</el-button
              >
            </div>

            <!-- 子表四查询结果 -->
            <el-table
              v-loading="listLoading"
              :data="dataForm.details4"
              :header-cell-style="tableColor"
              stripe
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="15vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column align="right" label="零件编号" prop="fpartno" />
              <el-table-column :formatter="formatterfpartname" align="right" label="零件名称" prop="fpartname" />
              <el-table-column align="right" label="序列号" prop="fpartmac" />
              <el-table-column align="right" label="采购价" prop="fbuyprice" />
              <el-table-column align="right" label="数量" prop="fqty" />
              <el-table-column align="right" label="合计" prop="ftotamt" />
              <el-table-column align="right" label="备注" prop="fmemo" />
              <el-table-column
                align="center"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    class="button-margin"
                    @click="handleDeleteFour(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancel()">取消</el-button>
        <el-button
          v-if="dialogStatus == 'create'"
          :style="{background:buttonColor.confirm,color:buttonColor.color}"
          @click="createData"
        >确定</el-button
        >
        <el-button v-else :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

    <!-- 子表一添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible1"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm1"
        :rules="rules1"
        :model="dataForm1"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin: 0 30px"
      >
        <el-form-item label="照片" prop="fimage">
          <el-upload
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :limit="1"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="fmemo">
          <el-input v-model="dataForm1.fmemo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData">确定</el-button>
      </div>
    </el-dialog>

    <!-- 子表二添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible2"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm2"
        :rules="rules2"
        :model="dataForm2"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-form-item label="故障代码" prop="ferrorno">
          <el-input v-model.number="dataForm2.ferrorno" />
        </el-form-item>
        <el-form-item label="故障名称" prop="ferrorname">
          <el-input v-model.number="dataForm2.ferrorname" />
        </el-form-item>
        <el-form-item label="备注" prop="fmemo">
          <el-input v-model="dataForm2.fmemo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible2 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addDataTwo">确定</el-button>
      </div>
    </el-dialog>

    <!-- 子表三添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible3"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm3"
        :rules="rules3"
        :model="dataForm3"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-form-item label="解决说明" prop="fprocmemo">
          <el-input v-model="dataForm3.fprocmemo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible3 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addDataThree">确定</el-button>
      </div>
    </el-dialog>

    <!-- 子表四添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible4"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm4"
        :rules="rules4"
        :model="dataForm4"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin: 0 30px"
      >
        <el-form-item label="零件编号" prop="fpartno">
          <div>
            <el-input v-model="dataForm4.fpartno" style="display: inline-block;width:92%" />
            <i style="display: inline-block;width:20px;color:#409EFF" class="el-icon-search" @click="searchDialogMaterial()"/>
          </div>
        </el-form-item>
        <el-form-item label="零件名称" prop="fpartname">
          <el-input v-model="dataForm4.fpartname" disabled/>
        </el-form-item>
        <el-form-item label="序列号" prop="fpartmac">
          <el-input v-model="dataForm4.fpartmac" disabled/>
        </el-form-item>
        <el-form-item label="采购价" prop="fbuypriceData">
          <el-input v-model="fbuypriceData" disabled/>
        </el-form-item>
        <el-form-item label="数量" prop="fqtyData">
          <el-input v-model.number="fqtyData" maxlength="6"/>
        </el-form-item>
        <el-form-item label="合计" prop="ftotamtData">
          <el-input v-model="ftotamtData" disabled/>
        </el-form-item>
        <el-form-item label="备注" prop="fmemo">
          <el-input v-model="dataForm4.fmemo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible4 = false">取消</el-button>
        <el-button :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addDataFour">确定</el-button>
      </div>
    </el-dialog>
    <Part :material-id-visible.sync="materialIdVisible" :table-color="tableColor" @materialDialog="materialDialogValue" />
    <codeDialog :search-visiblecode.sync="searchVisiblecode" :fpoint-no.sync="codeDialogfpointNo" :fsite-no.sync="codeDialogFsiteNo" :table-color="tableColor" @codeDialog="codeDialogValue" />
    <userDialog :search-visibleuse.sync="searchVisibleuse" :fsite-no.sync="userDialogFsiteNo" :table-color="tableColor" @userDialog="userDialogValue" />
    <labDialog :search-visiblelab.sync="searchVisiblelab" :fsite-no.sync="labDialogFsiteNo" :table-color="tableColor" @labDialog="labDialogValue" />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}
.el-button + .el-button {
  margin-left: 1px;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>

<script>
import {
  listrepairHead,
  createrepairHead,
  updaterepairHead,
  deleterepairHead
} from '@/api/repairHead'
import { listequipmentFault } from '@/api/equipmentFault'
import { listpartInfo } from '@/api/partInfo'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor, titleColor, buttonColor } from '@/filters/index'
import { getListArea, fsiteOptionsByLevel, getFbillno, listArea } from '@/api/area'
import { listRoom } from '@/api/room'
import UserDialog from '@/components/UserDialog'
import LabDialog from '@/components/LabDialog'
import CodeDialog from '@/components/CodeDialog'
import Part from '@/components/Part'

const siteTypeMap = {
  2: '已接单',
  3: '维修中',
  4: '已完成',
  5: '已评价'
}

export default {
  name: 'STcTodeal',
  components: { Pagination, UserDialog, LabDialog, Part, CodeDialog },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type]
    }
  },
  data() {
    return {
      ferrornamelist: [],
      fpartnamelist: [],
      buttonColor: buttonColor,
      getListfpointNoAreaAdd: null,
      getListfpointNoArea: null,
      getListuserAreaAdd: null,
      getListuserArea: null,

      labFlag: null,
      searchVisiblelab: false,
      labDialogFsiteNo: null,

      searchVisibleuse: false,
      userDialogFsiteNo: null,
      userFlag: null,

      materialIdVisible: false,
      searchVisiblecode: false,
      codeDialogFsiteNo: null,
      codeDialogfpointNo: null,
      getListuser: [],
      getListferrorlevel: [],
      getListfpointNo: [],
      getListfsiteNo: [],
      searchListAll: [],
      list: null,
      fbuypriceData: 0,
      fqtyData: 1,
      ftotamtData: 0,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      dataForm: {
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details2: [],
        details3: [],
        details4: [],
        details5: undefined
      },
      actionsTmp5: undefined,

      actionsTmp: [],
      dialogFormVisible1: false,
      dialogStatus1: '',
      dataForm1: {},

      actionsTmp2: [],
      dialogFormVisible2: false,
      dialogStatus2: '',
      dataForm2: {},

      actionsTmp3: [],
      dialogFormVisible3: false,
      dialogStatus3: '',
      dataForm3: {},

      actionsTmp4: [],
      dialogFormVisible4: false,
      dialogStatus4: '',
      dataForm4: {
        fpartno: undefined,
        fpartmac: undefined,
        // fpartname:undefined,
        fbuyprice: undefined,
        fqty: undefined,
        ftotamt: undefined,
        fmemo: undefined
      },

      listTmp: [],

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableColor: tableColor,
      titleColor: titleColor,
      rules: {
        fsiteNo: [{ required: true, message: '客户编号不能为空' }],
        freportuser: [{ required: true, message: '报修人员不能为空', trigger: 'blur' }],
        freportdate: [{ required: true, message: '报修日期不能为空' }],
        fpointNo: [{ required: true, message: '存放地点不能为空', trigger: 'blur' }],
        fequipmentbarcode: [{ required: true, message: '固定资产码不能为空', trigger: 'blur' }],
        freporttype: [
          {
            required: true, message: '维护合约不能为空'
          }
        ],
        ferrormemo: [{ required: true, message: '故障描述不能为空' }],
        ferrorlevel: [
          {
            type: 'number',
            message: '紧急程度必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        frepairuser: [],
        frecdate: [],
        fcfdate: [],
        fdddate: [],
        fwcdate: [],
        flkdate: [],
        // fbjnum: [
        //   {
        //     type: 'number',
        //     message: '维修得分必须为数字值',
        //     transform: (value) => Number(value)
        //   }
        // ],
        fbjnum: [],
        fbjnote: [],
        fupddate: [],
        foperator: [],
        fcheckdate: [],
        fcheckuser: [],
        fbillstate: [
          {
            type: 'number',
            message: '单据状态必须为数字值',
            transform: (value) => Number(value)
          }
        ]
      },
      rules1: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值', transform: (value) => Number(value) }
        ],
        fimage: [{ required: true, message: '照片不能为空' }],
        fmemo: []
      },
      rules2: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值', transform: (value) => Number(value) }
        ],
        ferrorno: [
          { required: true, message: '故障编号不能为空' },
          { type: 'number', message: '故障编号必须为数字值', transform: (value) => Number(value) }
        ],
        fmemo: []
      },
      rules3: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值', transform: (value) => Number(value) }
        ],
        fprocmemo: []
      },
      rules4: {
        fpartno: [
          { required: true, message: '零件编号不能为空' }
        ]
        // fpartmac: [],
        // fbuyprice: [],
        // ftotamt: [],
        // fmemo: []
      },
      fbillstateOptions: [
        { value: 2, label: '已接单' },
        { value: 3, label: '维修中' },
        { value: 4, label: '已完成' },
        { value: 5, label: '已评价' }
      ],
      fbillstateOptionsAll: [
        { value: 1, label: '已报修' },
        { value: 2, label: '已接单' },
        { value: 3, label: '维修中' },
        { value: 4, label: '已完成' },
        { value: 5, label: '已评价' }
      ],
      freporttypeOptions: [
        { value: 1, label: '合约内' },
        { value: 2, label: '合约外' }
      ]
    }
  },
  watch: {
    fbuypriceData: function(val) {
      if (this.fqtyData && val) {
        const num = (this.fqtyData * parseFloat(val)).toFixed(2)
        return this.ftotamtData = num
      } else {
        return this.ftotamtData = 0
      }
    },

    fqtyData: function(val) {
      if (this.fqtyData && val) {
        const num = (parseFloat(this.fbuypriceData) * val).toFixed(2)
        return this.ftotamtData = num
      } else {
        return this.ftotamtData = 0
      }
    }
  },
  created() {
    this.alarmdate = [this.parserDate(moment(new Date().setDate(1)).format('YYYY-MM-DD')), new Date()]
    this.getList()
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })

    if (this.$store.state.user.fsiteLevel == 3) {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
      // 地点
      getListArea({ flag: 10, arg1: this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })
        // 人员弹出框
      getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListuser = response.data.data.list
        })
        .catch(() => {
          this.getListuser = []
        })
    } else {
      // 地点
      getListArea({ flag: 10 })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })
      // 人员弹出框
      getListArea({ flag: 13 })
        .then(response => {
          this.getListuser = response.data.data.list
        })
        .catch(() => {
          this.getListuser = []
        })
    }

    // 紧急程度
    getListArea({ flag: 20 })
      .then(response => {
        this.getListferrorlevel = response.data.data.list
      })
      .catch(() => {
        this.getListferrorlevel = []
      })

      // 故障名称
    listequipmentFault({ limit: -1 })
      .then((response) => {
        this.ferrornamelist = response.data.data.list
      })
      .catch(() => {
        this.ferrornamelist = []
      })

    // 零件名称
    listpartInfo({ limit: -1 })
      .then((response) => {
        this.fpartnamelist = response.data.data.list
      })
      .catch(() => {
        this.fpartnamelist = []
      })
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.dataForm1.fimage = URL.createObjectURL(file.raw)
    },
    handleRemove() {},
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },

    // 维修人员改变
    frepairuserChange(e) {
      if (e) {
        this.dataForm.fbillstate = 2
        this.dataForm.frecdate = new Date()
      } else {
        this.dataForm.fbillstate = 1
        this.dataForm.frecdate = null
      }
    },

    // 地点改变
    changeFpointNo: function(e) {
      this.dataForm.fequipmentbarcode = null
      this.dataForm.fequipmenttag = null
      this.dataForm.feuipmentid = null
      this.dataForm.freportuser = ''
      if (e) {
        listRoom({ fpointNo: e })
          .then(response => {
            this.dataForm.freportuser = response.data.data.list[0].fperson
          })
          .catch(() => {
            this.dataForm.freportuser = ''
          })
      }
    },

    // 故障名称
    formatterferrorname: function(row, column) {
      if (this.ferrornamelist) {
        for (let i = 0; i < this.ferrornamelist.length; i++) {
          if (row.ferrorno == this.ferrornamelist[i].ferrorno) {
            return this.ferrornamelist[i].fdangername
          }
        }
        return ''
      } else {
        return ''
      }
    },

    // 零件名称
    formatterfpartname: function(row, column) {
      if (this.fpartnamelist) {
        for (let i = 0; i < this.fpartnamelist.length; i++) {
          if (row.fpartno == this.fpartnamelist[i].fpartno) {
            return this.fpartnamelist[i].fpartname
          }
        }
        return ''
      } else {
        return ''
      }
    },

    // 紧急程度
    formatferrorlevel: function(row, column) {
      if (this.getListferrorlevel) {
        for (let i = 0; i < this.getListferrorlevel.length; i++) {
          if (row.ferrorlevel == this.getListferrorlevel[i].value) {
            return this.getListferrorlevel[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 存放地点
    formatfpointNo: function(row, column) {
      if (this.getListfpointNo) {
        for (let i = 0; i < this.getListfpointNo.length; i++) {
          if (row.fpointNo === this.getListfpointNo[i].value) {
            return this.getListfpointNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    // 维修人员
    formatfrepairuser: function(row, column) {
      if (this.getListuser) {
        for (let i = 0; i < this.getListuser.length; i++) {
          if (row.frepairuser == this.getListuser[i].value) {
            return this.getListuser[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 报修人员
    formatfreportuser: function(row, column) {
      if (this.getListuser) {
        for (let i = 0; i < this.getListuser.length; i++) {
          if (row.freportuser == this.getListuser[i].value) {
            return this.getListuser[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    formatfsiteNo: function(row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    changeFsiteNo(data) {
      this.listQuery.fpointNo = ''
      this.listQuery.freportuser = ''
      this.listQuery.frepairuser = ''
      this.getListfpointNoArea = []
      this.getListuserArea = []
      if (data) {
        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then(response => {
            this.getListfpointNoArea = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoArea = []
          })

          // 人员弹出框
        getListArea({ flag: 13, arg1: data })
          .then(response => {
            this.getListuserArea = response.data.data.list
          })
          .catch(() => {
            this.getListuserArea = []
          })
      }
    },

    changeFsiteNoAdd(data) {
      this.dataForm.fpointNo = ''
      this.dataForm.freportuser = ''
      this.dataForm.frepairuser = ''
      this.getListfpointNoAreaAdd = []
      this.getListuserAreaAdd = []
      this.dataForm.fequipmentbarcode = null
      this.dataForm.fequipmenttag = null
      this.dataForm.feuipmentid = null
      this.dataForm.fbillstate = 1
      if (data) {
        // 存放地点
        getListArea({ flag: 10, arg1: data })
          .then(response => {
            this.getListfpointNoAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoAreaAdd = []
          })

        // 人员弹出框
        getListArea({ flag: 13, arg1: data })
          .then(response => {
            this.getListuserAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListuserAreaAdd = []
          })

        // 维修人员
        listArea({ fsiteNo: data, fsiteLevel: 3 })
          .then((response) => {
            if (response.data.data.list[0].fengineer) {
              this.dataForm.frepairuser = response.data.data.list[0].fengineer
              this.dataForm.frecdate = new Date()
              this.dataForm.fbillstate = 2
            } else {
              this.dataForm.frepairuser = ''
              this.dataForm.fbillstate = 1
            }
          })
          .catch(() => {
            this.dataForm.frepairuser = ''
            this.dataForm.fbillstate = 1
          })
      }
    },

    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value
      if (value === 'add') {
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      } else if (value === 'addre') {
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      } else if (value === 'searchre') {
        this.userDialogFsiteNo = this.listQuery.fsiteNo
      } else {
        this.userDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisibleuse = true
    },

    // 人员弹出框返回值
    userDialogValue(value) {
      if (this.userFlag === 'add') {
        this.dataForm.freportuser = value.user.id.toString()
      } else if (this.userFlag === 'addre') {
        this.dataForm.frepairuser = value.user.id.toString()
      } else if (this.userFlag === 'searchre') {
        this.listQuery.frepairuser = value.user.id.toString()
      } else {
        this.listQuery.freportuser = value.user.id.toString()
      }
    },

    // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value
      if (value === 'add') {
        this.labDialogFsiteNo = this.dataForm.fsiteNo
      } else {
        this.labDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisiblelab = true
    },

    // 地点弹出框返回值
    labDialogValue(value) {
      if (this.labFlag === 'add') {
        this.dataForm.fpointNo = value.lab.fpointNo
        this.dataForm.fequipmentbarcode = null
        this.dataForm.fequipmenttag = null
        this.dataForm.feuipmentid = null
      } else {
        this.listQuery.fpointNo = value.lab.fpointNo
      }
    },

    // 固定资产码弹出框
    searchDialogcode(value) {
      this.codeDialogFsiteNo = this.dataForm.fsiteNo
      this.codeDialogfpointNo = this.dataForm.fpointNo
      this.searchVisiblecode = true
    },

    // 固定资产码弹出框返回值
    codeDialogValue(value) {
      this.dataForm.fequipmentbarcode = value.info.fequipmentbarcode
      this.dataForm.feuipmentid = value.info.feuipmentid
      this.dataForm.fequipmenttag = value.info.fequipmenttag
    },

    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    formatDate: function(date) {
      if (typeof (date) === 'object') {
        var ym
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        ym = '' + y + m + d
        return ym
      } else {
        return date
      }
    },
    getList() {
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true
      if (this.listQuery.fbillno == '') {
        this.listQuery.fbillno = null
      }
      listrepairHead(this.listQuery)
        .then((response) => {
          const temp = []
          let i = 0
          response.data.data.list.filter((item) => {
            if (
              item.fbillstate === 2 ||
              item.fbillstate === 3 ||
              item.fbillstate === 4 ||
              item.fbillstate === 5
            ) {
              temp.push(item)
              i++
            }
          })
          this.list = temp
          this.total = i
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details2: [],
        details3: [],
        details4: [],
        details5: undefined
      }
    },
    handleCreate() {
      this.resetForm()
      getFbillno({ flag: 2004 })
        .then((response) => {
          if (response) {
            this.dataForm.fbillno = response.data.data
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          }
        })
        .catch(() => {
          this.dataForm.fbillno = ''
        })
      if (this.$store.state.user.fsiteLevel == 3) {
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo
        // 维修人员
        listArea({ fsiteNo: this.$store.state.user.fsiteNo, fsiteLevel: 3 })
          .then((response) => {
            if (response.data.data.list[0].fengineer) {
              this.dataForm.frepairuser = response.data.data.list[0].fengineer
              this.dataForm.frecdate = new Date()
              this.dataForm.fbillstate = 2
            } else {
              this.dataForm.frepairuser = ''
              this.dataForm.frecdate = null
              this.dataForm.fbillstate = 1
            }
          })
          .catch(() => {
            this.dataForm.frepairuser = ''
            this.dataForm.frecdate = null
            this.dataForm.fbillstate = 1
          })
      } else {
        this.getListfpointNoAreaAdd = []
        this.getListuserAreaAdd = []
      }
      this.dataForm.frecdate = new Date()
      this.dataForm.freportdate = new Date()
      this.dataForm.ferrorlevel = this.getListferrorlevel[0].value
      this.dialogStatus = 'create'
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          createrepairHead(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备维修主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.actionsTmp = []
      row.details.forEach((v) => {
        this.actionsTmp.push(v)
      })

      this.actionsTmp2 = []
      row.details2.forEach((v) => {
        this.actionsTmp2.push(v)
      })

      this.actionsTmp3 = []
      row.details3.forEach((v) => {
        this.actionsTmp3.push(v)
      })

      this.actionsTmp4 = []
      row.details4.forEach((v) => {
        this.actionsTmp4.push(v)
      })

      this.actionsTmp5 = row.details5

      this.listTmp = row

      this.dataForm = Object.assign({}, row)
      if (this.$store.state.user.fsiteLevel != 3) {
        // 存放地点
        getListArea({ flag: 10, arg1: row.fsiteNo })
          .then(response => {
            this.getListfpointNoAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoAreaAdd = []
          })

        // 人员弹出框
        getListArea({ flag: 13, arg1: row.fsiteNo })
          .then(response => {
            this.getListuserAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListuserAreaAdd = []
          })
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id
          this.dataForm.fupddate = new Date()
          updaterepairHead(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fbillno === this.dataForm.fbillno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备维修主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除设备维修主表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleterepairHead(row)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除设备维修主表成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response
            })
          })
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    },
    handleUpdate1() {
      this.handleRemove()
      this.dataForm1 = {}
      this.dialogStatus1 = 'create'
      this.dialogFormVisible1 = true
      this.fbuypriceData = 0,
      this.fqtyData = 1,
      this.ftotamtData = 0,
      this.dataForm4 = {}
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },

    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row)
      this.dataForm.details.splice(index, 1)
    },
    addData() {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          this.dataForm1.fbuyprice = parseFloat(this.fbuypriceData)
          this.dataForm1.fqty = this.fqtyData
          this.dataForm1.ftotamt = parseFloat(this.ftotamtData)
          this.dialogFormVisible1 = false
          this.dataForm.details.push(this.dataForm1)
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp
          this.dataForm.details = this.actionsTmp
          this.dataForm.details2 = this.actionsTmp2
          this.dataForm.details3 = this.actionsTmp3
          this.dataForm.details4 = this.actionsTmp4
          this.dataForm.details5 = this.actionsTmp5
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp
          this.dataForm.details = this.actionsTmp
          this.dataForm.details2 = this.actionsTmp2
          this.dataForm.details3 = this.actionsTmp3
          this.dataForm.details4 = this.actionsTmp4
          this.dataForm.details5 = this.actionsTmp5
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },

    // 弹出零件框
    materialDialogValue(value) {
      console.log(value)
      this.dataForm4.fpartno = value.data.fclassstno
      this.dataForm4.fpartmac = value.data.fbarcode
      this.dataForm4.fpartname = value.data.fpartname
      this.fbuypriceData = value.data.fbuyprice
    },
    // 物料弹出框
    searchDialogMaterial() {
      this.materialIdVisible = true
    },

    handleUpdateTwo() {
      this.dataForm2 = {}
      this.dialogStatus2 = 'create'
      this.dialogFormVisible2 = true
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate()
      })
    },

    handleDeleteTwo(row) {
      const index = this.dataForm.details2.indexOf(row)
      this.dataForm.details2.splice(index, 1)
    },
    addDataTwo() {
      this.$refs['dataForm2'].validate((valid) => {
        if (valid) {
          this.dialogFormVisible2 = false
          this.dataForm.details2.push(this.dataForm2)
        }
      })
    },

    handleUpdateThree() {
      this.dataForm3 = {}
      this.dialogStatus3 = 'create'
      this.dialogFormVisible3 = true
      this.$nextTick(() => {
        this.$refs['dataForm3'].clearValidate()
      })
    },

    handleDeleteThree(row) {
      const index = this.dataForm.details3.indexOf(row)
      this.dataForm.details3.splice(index, 1)
    },
    addDataThree() {
      this.$refs['dataForm3'].validate((valid) => {
        if (valid) {
          this.dialogFormVisible3 = false
          this.dataForm.details3.push(this.dataForm3)
        }
      })
    },

    handleUpdateFour() {
      this.dataForm4 = {
        fqty: 1,
        fpartno: undefined,
        fpartmac: undefined,
        fbuyprice: undefined,
        ftotamt: undefined,
        fmemo: undefined
      }
      this.dialogStatus4 = 'create'
      this.dialogFormVisible4 = true
      this.$nextTick(() => {
        this.$refs['dataForm4'].clearValidate()
      })
    },

    handleDeleteFour(row) {
      const index = this.dataForm.details4.indexOf(row)
      this.dataForm.details4.splice(index, 1)
    },
    addDataFour() {
      this.$refs['dataForm4'].validate((valid) => {
        if (valid) {
          this.dialogFormVisible4 = false
          this.dataForm.details4.push(this.dataForm4)
        }
      })
    },
    audit() {
      this.$confirm('是否确定', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(1)
      })
    }
  }
}
</script>
